<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <button>开始动画</button>
    <p>
      默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的
      CSS position 属性设置为 relative、fixed 或 absolute。
    </p>
    <div style="background: #98bf21; height: 100px; width: 100px; position: absolute"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(() => {
        $('button').click(function () {
          $('div').animate({ left: '250px' }, 'slow', function () {
            console.log('animate动画完成后执行')
          })
        })
      })
    </script>
  </body>
</html>
